import React from 'react';
import { Form, Button, Spin, Layout, Input, Tabs, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { Redirect, useHistory } from 'react-router-dom';
import { useBoolean } from 'ahooks';
import RequestApi from '@/utils/request';
import State from '@/utils/state';
import footer from '@/assets/images/login/footer.png';
import bg from '@/assets/images/login/login_bg.png';
import css from '@/styles/compoment/index.scss';

/**
 * @description 用户注册
 */
export default () => {
	const [loading, { setTrue, setFalse }] = useBoolean(false);
	const history = useHistory();
	const [form] = Form.useForm();

	const handleSubmit = (value) => {
		const { username, password, comfirmPassword } = value;
		let flag = true;
		if (password !== comfirmPassword) {
			flag = false;
			message.error('两次输入的密码不一样，请重新输入');
			form.setFieldsValue({
				comfirmPassword: null,
			});
		}
		const body = {
			orgId: 0,
			password,
			username,
		};
		console.log(body);
		if (flag === true) {
			setTrue();
			RequestApi.connection('post', 'user/register', body)
				.then(() => {
					setFalse();
					message.success('注册成功, 即将返回登录页面');
					setTimeout(() => {
						history.push('/login');
					}, 500);
				})
				.catch(() => {
					setFalse();
					message.error('注册失败，可能已存在该账号');
				});
		}
	};

	const login = () => {
		history.push('/login');
	};
	if (State.isLogin) return <Redirect to={{ pathname: '/' }} />;

	const { TabPane } = Tabs;
	return (
		<Layout className={css.login_layout}>
			<img src={bg} alt="" className={css.bg} />
			<Layout>
				<Layout.Content className={css.login_main}>
					<div className={css.login_title}>重庆市停车管理系统</div>
					<div className={css.login_content}>
						<></>
					</div>
					<Tabs defaultActiveKey="1" centered className={css.form_content}>
						<TabPane tab="新用户注册" key="1">
							<Form form={form} onFinish={handleSubmit}>
								<Spin spinning={loading} tip="登录中...">
									<Form.Item name="username">
										<Input placeholder="用户名" prefix={<UserOutlined className="site-form-item-icon" />} />
									</Form.Item>
									<Form.Item name="password">
										<Input.Password placeholder="密码" prefix={<LockOutlined className="site-form-item-icon" />} />
									</Form.Item>
									<Form.Item name="comfirmPassword">
										<Input.Password placeholder="确认密码" prefix={<LockOutlined className="site-form-item-icon" />} />
									</Form.Item>
									<Form.Item>
										<Button type="primary" htmlType="submit" className={css.login_form_button}>
											注册
										</Button>
									</Form.Item>
								</Spin>
								<Form.Item style={{ display: 'block', textAlign: 'center', float: 'right' }}>
									<Button type="link" block onClick={login}>
										<span style={{ color: 'black' }}>返回登录</span>
									</Button>
								</Form.Item>
							</Form>
						</TabPane>
					</Tabs>
				</Layout.Content>
			</Layout>
			<Layout.Footer className={css.login_footer}>
				<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=50019002502240_blank">
					<img src={footer} alt="" />
					<p>渝公网安备 50019002502240号</p>
				</a>
			</Layout.Footer>
		</Layout>
	);
};
